<template>
    <div id="app">
        <div class="topHeader">
            <center>
                <router-link v-for="(k,v) in list" :key="k.uri" :to="k.uri" :name="k.name" class="topHeaderItem">{{k.name}} </router-link>
            </center>
        </div>
        <div class="topHeaderBlocker">
        </div>
        <div id="main">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                list:[
                    {
                        uri:"/_apilist",
                        name:"editlist"
                    },
                    {
                        uri:"/_preview",
                        name:"preview"
                    }
                ]
            }
        }
    }
</script>

<style>
    .topHeader{
        font-size:1.5em;
        top:0px;
        padding:0px;
        margin:0px;
        width:100%;
        height:30px;
        position:fixed;
        border-bottom:solid #e2e1d7 1px;
        z-index:1;
    }
    .topHeaderItem{
        text-decoration:none;
        margin-left:5px;
        color:black;
        width:100px;
        height:100%;
    }
    .topHeaderItem:hover{
        background-color:#ccc;
        color:white;
    }
    .topHeaderBlocker{
        z-index:0;
        width:100%;
        top:0px;
        height:30px;
        position:relative;
    }
    #main{
        width:100%;
    }
</style>
